<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<%@ page import="com.zy.bean.MUsers" %>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			ul,
			li,
			dd,
			dt,
			dl {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			a {
				color: black;
				font-family: "微软雅黑";
				font-size: 15px;
				text-decoration: none;
			}

			#con{
				width: 98%;
				margin: auto;
			}
			.top_nav{
				background-color:#e3e4e5;
				height: 40px;
				background-color:red;
				padding: 10px;
			}
			.top_nav #location{
				display: inline-block;
				background: white;
				position: relative;
				left:10%;
				width: 100px;
			}
			.top_nav .user_info{
				display: inline-block;
				float:right;
			}
			.top_nav #location .menu_pop{
				background: white;
				position: absolute;
				width: 300px;
				/*min-height: 500px;*/
				z-index: 300;
				display: none;
			}
			.top_search{
				background-color:#ffffff;
				height: 80px;
				padding: 20px;
			}
			.top_search .img_icon{
				float:left;
				border: 1px solid red;
				width:50px;
				height: 50px;
				background: url(./imgs/down_tem.jpg);
				background-size: 100% 100%;
				transition: all 2s;
			}
			.top_search .search_parent{
				float:left;
				margin-left: 15%;
			}
			.top_search .search_parent input{
				text-rendering: auto;
				letter-spacing: normal;
				word-spacing: normal;
				text-transform: none;
				text-indent: 0px;
				text-shadow: none;
				display: inline-block;
				text-align: start;
				cursor: text;
				margin: 0em;
				font: 400 13.3333px Arial;
				padding: 1px 2px;
				border-width: 2px;
				border-style: inset;
				border-image: initial;
				left: 0;
				padding: 2px 44px 2px 17px;
				width: 425px;
				height: 26px;
				line-height: 26px;
				font-size: 12px;
			}
			.top_search .img_icon:hover{
				background: url(imgs/book1.png);
				background-size: 100% 100%;
			}
			.mid_content{
				background-color:#e3e4e5;
				
			}
			.mid_content .mid_con_parent{
				border: 1px solid red;
				overflow: auto;
				margin: 0 auto;
				width: 90%;
			}
			.mid_content .mid_con_parent .mid_con_left{
				border: 1px solid red;
				width: 20%;
				background: red;
				float: left;
			}
            /*
            中间布局
            */
			.mid_content .mid_con_parent .mid_con_center{
				border: 1px solid red;
				width: 55%;
				margin-left: 20px;
				float: left;
				position: relative;
                /*background: red;*/
			}
            /**
            轮播样式框
             */
			.mid_content .mid_con_parent .mid_con_center .mid_con_cen_baner{
				/*background-image: url(imgs/book1.png);*/
				/*background-size: 100% 100%;*/
				position: relative;
				z-index: 100;
			}
			.mid_content .mid_con_parent .mid_con_right{
					border: 1px solid red;
				width: 20%;
					margin-left: 20px;
				float: left;
			}
			.bottom_content{
				margin-top: 20px;
				background-color:#e3e4e5;
				width: 100%;
				text-align: center;
			}
			/**
			吸顶效果
			 */
			.fix_top{
				position:fixed;
				z-index:400;
				top:0;
				width:98%;
			}
		</style>
		<style>
            /**
            商品菜单
             */
			#menu{
				position: relative;
			}
			#menu ul{
				padding: 15px 0;
				margin: 9px 0;
				/*list-style: none;*/
				background-color: #6c6669;
				color: #fff;
				border-right-width: 0;
			}
			#menu ul li{
				display: block;
				height: 30px;
				line-height: 30px;
				padding-left: 12px;
				cursor: pointer;
				font-size: 14px;
				position: relative;
			}
			#menu ul li.active{
				background: #999395;
			}
			#menu ul li:hover{
				background-color: #f7f7f7;
				color:red;
			}
			#menu #sub{
				width: 600px;
				position: absolute;
				border: 1px solid #f7f7f7;
				background: #f7f7f7;
				box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
				left: 200px;
				top: 0;
				box-sizing: border-box;
				margin: 0;
				padding: 10px;
				z-index: 200;
			}
			#menu #sub .sub_content a{
				font-size: 12px;
				color: #666;
				text-decoration: none
			}
			#menu #sub .sub_content dd a{
				border-left: 1px solid #e0e0e0;
				padding: 0 10px;
				margin: 4px 0;
			}
			#menu #sub .sub_content dl {
				overflow: hidden;
			}
			#menu #sub .sub_content dt{
				float: left;
				width: 70px;
				font-weight: bold;
				clear: left;
				position: relative;
			}
			#menu #sub .sub_content dd{
				float: left;
				margin-left: 5px;
				border-top: 1px solid #eee;
				margin-bottom: 5px;
			}
			#menu #sub .sub_content dt i{
				width: 4px;
				height: 14px;
				font: 400 9px/14px consolas;
				position: absolute;
				right: 5px;
				top: 5px;
			}
			.none{
				display: none;
			}
		</style>
        <style>
            /**
            轮播图
             */
            #lunbo_con{
                background: grey;
                position: relative;
                width:100%;
                height:300px;
            }
            #lunbo_con ul{
                /*list-style: none;*/
            }
            #lunbo_con ul li{
                width:100%;
                height:100%;
                /*background-color: blue;*/
                background-image: url(imgs/book1.png);
                background-size: 100% 100%;
                position: absolute;
                display: none;
            }
            #lunbo_con .bt_group_radio{
                position: absolute;
                z-index: 100;
                left: 20%;
                bottom: 0;
            }
            #lunbo_con .bt_group_radio .bt_radio{
                cursor: pointer;
                margin-left: 10px;
                border-radius: 10px;
                width: 5px;
                height: 5px;
                background: #74BA11;
            }
            #lunbo_con .bt_group{
                width:30px;
                height: 20px;
            }
            #lunbo_con #pre{
                position: absolute;
                z-index: 110;
                left:0;
                bottom: 0;
            }
            #lunbo_con #next{
                position: absolute;
                z-index: 110;
                right:0;
                bottom: 0;
            }
        </style>
	</head>
	<body>
		<%--容器开始--%>
		<div id="con">
			<div class="top_nav">
				<div id="location">
					<img src="imgs/play_icon.jpg"/>
					<span>云南</span>
					<div class="menu_pop">
						<ul>
							<li>北京&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海</li>
							<li>北京&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海</li>
							<li>北京&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海</li>
							<li>北京&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海&nbsp;&nbsp;上海</li>
						</ul>
					</div>
				</div>
				<div class="user_info">
				<%--	<%
						MUsers muser =(MUsers) request.getSession().getAttribute("muser");
					%>
					---<%= muser != null ? muser.getUserName() : "请登录"%>------%>
					欢迎：${sessionScope.muser.userName} 登录 &nbsp;&nbsp;<a href="<%=request.getServletContext().getContextPath()%>/user?method=logOut">注销</a>
				</div>
			</div>
			<div class="top_search">
				<div class="img_icon"></div>
				<div class="search_parent">
					<input type="text" value="" id="search_key"/><span class="search">查找</span>
				</div>
			</div>
			<div class="mid_content">
				<!-- 内容区start-->
				<div class="mid_con_parent">
<!--					main左侧菜单 start-->
					<div class="mid_con_left">
						<div class="" id="menu">
							<ul>
								<li data-id="a">
									<span>家用电器</span>
								</li>
								<li data-id="b">
									<span>手机/运营商/数码</span>
								</li>
								<li data-id="c">
									<span>电脑办公</span>
								</li>
							</ul>
							<!-- 右侧弹出层 start-->
							<div id="sub" class="none">
								<!-- 	数据项a start -->
								<div id="a" class="sub_content ">
									<dl>
										<dt>
											<a href="#">电视<i>></i></a>
										</dt>
										<dd>
											<a href="#">合资品牌</a>
											<a href="#">国产品牌</a>
											<a href="#">互联网品牌</a>
										</dd>
									</dl>
									<dl>
										<dt>
											<a href="#">空调<i>></i></a>
										</dt>
										<dd>
											<a href="#">壁挂式空调</a>
											<a href="#">柜式空调</a>
											<a href="#">中央空调</a>
											<a href="#">空调配件</a>
										</dd>
									</dl>
									<dl>
										<dt>
											<a href="#">洗衣机<i>></i></a>
										</dt>
										<dd>
											<a href="#">滚筒洗衣机</a>
											<a href="#">洗烘一体机</a>
											<a href="#">波轮洗衣机</a>
											<a href="#">迷你洗衣机</a>
											<a href="#">洗衣机配件</a>
										</dd>
									</dl>
									<dl>
										<dt>
											<a href="#">冰箱<i>></i></a>
										</dt>
										<dd>
											<a href="#">对门</a>
											<a href="#">对开门</a>
											<a href="#">三门</a>
											<a href="#">双门</a>
											<a href="#">冷柜/冰吧</a>
											<a href="#">酒柜</a>
											<a href="#">冰箱配件</a>
										</dd>
									</dl>
								</div>
								<!-- 	数据项a end -->
							</div>
							<!-- 右侧弹出层 end-->
						</div>
					</div>
<!--					main左侧菜单 end-->
					<div class="mid_con_center">
<!--                        轮播 start-->
						<div class="mid_con_cen_baner">
                            <div id="lunbo_con">
                                <ul class="img_con">
                                    <li style="display: block;">l1</li>
                                    <li>l2</li>
                                    <li>l3</li>
                                    <li>l4</li>
                                    <li>l5</li>
                                </ul>
                                <ul  class="bt_group_radio">
                                </ul>
                                <button class="bt_group" id="pre">pre</button>
                                <button class="bt_group" id="next">next</button>
                            </div>


                        </div>
<!--                        轮播end-->
					</div>
					<div class="mid_con_right">
						guanggao
					</div>
				</div>
				<!-- 内容区end-->
			</div>
			<div class="bottom_content">
				<ul>
					<li>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
					</li>
					<li>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
					</li>
					<li>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
					</li>
					<li>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
					</li>
					<li>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
						<img src="imgs/jd/20200918_111852_000.jpg" width="400px"/>
					</li>

				</ul>
			</div>
		</div>
<%--		容器 end--%>
		<script src="jquery/jquery-3.5.0.js"></script>
		<script>
			/**
			 * 页面布局弹出顶部子菜单
			 */
			$(document).ready(function(){
				// 菜单的弹出事件
				$(".top_nav #location").on("mouseenter",function(){
					$(this).find(".menu_pop").css({"display":"block"});
				}).on("mouseleave",function(){
					$(this).find(".menu_pop").css({"display":"none"});
				});
				//滚动事件
				//监听吸顶代码
				$(window).scroll( function() {
					var top_search_top = $("#con .top_search").offset().top;
					//之前 这种jq方式不能获得值.有兼容问题，下面语句解决
					var body_top = document.body.scrollTop||document.documentElement.scrollTop;
					if(body_top > top_search_top){
						$("#con .top_search").addClass("fix_top");
					}else{
						$("#con .top_search").removeClass("fix_top");
					}
				} );
			});
		</script>
		<script>
            /**
             * 弹出菜单
             */
			$(document).ready(function(){
				function initDom(){
					$.ajax({
						type: "get",
						dataType:"json",//服务器响应的数据类型
						url: "<%=request.getServletContext().getContextPath()%>/mall?method=getMenuTypeListJson",//接口路径
						data: {"uname":"aa","oper":"ajaxlogin"},//传给服务器的数据
						success: function(data){
							var productTypeList = data.productTypeList;
							var liHtml = '';
							if(productTypeList){
								$.each(productTypeList,function(i,item){
									liHtml += '<li data-id="menu'+i+'">';
									liHtml += '<span>'+item.name+'</span>';
									liHtml += '</li>';
								})
							}
							$("#menu ul").html(liHtml);
							console.info(liHtml)
						},error:function(e){
							console.info(e);
						}
					});
				}
				//初始化节点
				initDom();
				//菜单逻辑控制
				var data_id;
				$("#menu").on("mouseenter",function(){
					//弹出层显示
					var menuHeight = $(this).innerHeight();
					$("#sub").css({"min-height":menuHeight+"px"});
					$("#sub").show("fast");
				}).on("mouseleave",function(){
					//弹出层显示
					$("#sub").hide("fast");
				});
				$("#sub").on("mouseenter",function(){
					//弹出层显示
					if(data_id){
						$("#sub").show();
						$("#"+data_id).show();
						console.info("sub enter data_id show"+data_id)
					}
				});
				$("#menu ul li").on("mouseenter",function(){
					//判断是否是同个li的菜单，是的话就不重新刷新展示
					var this_data_id = $(this).attr("data-id");
					if(data_id){
						if(this_data_id == data_id){
							return;
						}
					}
					//当前所在的分类对象
					data_id = $(this).attr("data-id");
					$("#sub").css({
						top: liTop + 'px'
					});
					$("#sub").show();
					//绑定的具体数据项
					$("#sub .sub_content").hide();
					$("#"+data_id).show("fast");
				});
			});
		</script>
        <script type="text/javascript">
            /**
             * 轮播图片
             */
            $(document).ready(function(){
                var liImgAry = $("#lunbo_con .img_con li");
                var liImgLen = liImgAry.length;
                for (var i = 0; i < liImgLen; i++) {
                    $(".bt_group_radio").append("<span data-id='"+i+"' class='bt_radio'>radio"+i+"</span>")
                }
                $(".bt_radio").on("click",function(){
                    var data_id = $(this).attr("data-id");
                    showImg(data_id);
                    curIndex = data_id;
                })

                var curIndex = 0;//默认图下标
                $("#pre").on("click",function(){
                    curIndex = curIndex - 1;
                    if(curIndex < 0){
                        curIndex = liImgLen - 1;
                    }
                    showImg(curIndex);
                })
                $("#next").on("click",function(){
                    curIndex = curIndex + 1;
                    if(curIndex > liImgLen - 1){
                        curIndex = curIndex - liImgLen;
                    }
                    showImg(curIndex);
                })

                function showImg(index){
                    liImgAry.hide();
                    $(liImgAry[index]).fadeIn('slow');
                }
                var autoPlay = function(){
                    curIndex--;
                    if(curIndex < 0){
                        curIndex = liImgLen - 1;
                    }
                    if(curIndex > liImgLen - 1){
                        curIndex = curIndex - liImgLen;
                    }
                    showImg(curIndex);
                };
                //自动播放
                var autoPlayTime = setInterval(autoPlay,2000);
                $("#lunbo_con").on("mouseenter",function(){
                    clearInterval(autoPlayTime);
                }).on("mouseleave",function(){
                    autoPlayTime = setInterval(autoPlay,2000);
                })
            });
        </script>

	</body>
</html>
